<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 心理咨询系统</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/frontend.css') }}" rel="stylesheet">
</head>
<body>
    <div class="register-container">
        <div class="register-card">
            <!-- 步骤指示器 -->
            <div class="step-indicator">
                <div class="text-center mb-3">
                    <h4><i class="bi bi-heart-pulse me-2"></i>心理咨询系统注册</h4>
                </div>
                <div class="d-flex justify-content-center align-items-center">
                    <div class="step active" id="step1">1</div>
                    <div class="flex-fill" style="height: 2px; background: #e9ecef;"></div>
                    <div class="step" id="step2">2</div>
                    <div class="flex-fill" style="height: 2px; background: #e9ecef;"></div>
                    <div class="step" id="step3">3</div>
                </div>
                <div class="row text-center mt-2">
                    <div class="col">基本信息</div>
                    <div class="col">协议确认</div>
                    <div class="col">完成注册</div>
                </div>
            </div>

            <!-- 步骤内容 -->
            <div class="step-content">
                <!-- 第一步：基本信息 -->
                <div class="step-form" id="form-step1">
                    <h5 class="mb-4 text-center">基本账户信息</h5>
                    <form id="basicInfoForm">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="username" placeholder="用户名" required>
                                    <label for="username">
                                        <i class="bi bi-person me-2"></i>用户名 *
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
                                    <label for="email">
                                        <i class="bi bi-envelope me-2"></i>邮箱地址 *
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <input type="tel" class="form-control" id="phone" placeholder="手机号码">
                                    <label for="phone">
                                        <i class="bi bi-phone me-2"></i>手机号码
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <select class="form-select" id="gender">
                                        <option value="">请选择</option>
                                        <option value="male">男</option>
                                        <option value="female">女</option>
                                        <option value="other">其他</option>
                                    </select>
                                    <label for="gender">
                                        <i class="bi bi-gender-ambiguous me-2"></i>性别
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <input type="password" class="form-control" id="password" placeholder="Password" required>
                                    <label for="password">
                                        <i class="bi bi-lock me-2"></i>设置密码 *
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required>
                                    <label for="confirmPassword">
                                        <i class="bi bi-lock me-2"></i>确认密码 *
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center">
                            <button type="button" class="btn btn-next btn-primary" onclick="nextStep(1)">
                                下一步 <i class="bi bi-arrow-right ms-2"></i>
                            </button>
                        </div>
                    </form>
                </div>

                <!-- 第二步：协议确认 -->
                <div class="step-form hidden" id="form-step2">
                    <h5 class="mb-4 text-center">服务协议确认</h5>
                    
                    <div class="agreement-content mb-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">用户服务协议</h6>
                            </div>
                            <div class="card-body" style="max-height: 300px; overflow-y: auto;">
                                <p>欢迎使用心理咨询师服务系统。请仔细阅读以下服务协议：</p>
                                
                                <h6>1. 服务说明</h6>
                                <p>本系统为心理咨询师提供专业的量表管理和数据分析服务，包括但不限于：</p>
                                <ul>
                                    <li>心理量表创建和管理</li>
                                    <li>测评数据收集和分析</li>
                                    <li>专业报告生成</li>
                                    <li>用户数据安全保护</li>
                                </ul>
                                
                                <h6>2. 用户责任</h6>
                                <p>用户在使用本系统时应当：</p>
                                <ul>
                                    <li>遵守相关法律法规</li>
                                    <li>保护被测评者隐私</li>
                                    <li>合理使用系统功能</li>
                                    <li>配合系统安全措施</li>
                                </ul>
                                
                                <h6>3. 隐私保护</h6>
                                <p>我们承诺保护用户隐私，采用先进的安全技术保护用户数据。</p>
                                
                                <h6>4. 服务变更</h6>
                                <p>系统功能可能根据需要进行调整，我们会提前通知用户。</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-check mb-4">
                        <input class="form-check-input" type="checkbox" id="agreeTerms" required>
                        <label class="form-check-label" for="agreeTerms">
                            我已阅读并同意 <strong>用户服务协议</strong> 和 <strong>隐私政策</strong>
                        </label>
                    </div>
                    
                    <div class="text-center">
                        <button type="button" class="btn btn-outline-secondary me-2" onclick="prevStep(2)">
                            <i class="bi bi-arrow-left me-2"></i>上一步
                        </button>
                        <button type="button" class="btn btn-primary" onclick="nextStep(2)">
                            确认注册 <i class="bi bi-arrow-right ms-2"></i>
                        </button>
                    </div>
                </div>

                <!-- 第三步：完成注册 -->
                <div class="step-form hidden" id="form-step3">
                    <div class="text-center">
                        <div class="mb-4">
                            <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
                        </div>
                        <h4 class="text-success mb-3">注册成功！</h4>
                        <p class="mb-4">欢迎加入心理咨询师服务系统，您现在可以开始使用我们的专业服务。</p>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="card text-start">
                                    <div class="card-body">
                                        <h6 class="card-title"><i class="bi bi-gift me-2"></i>新用户福利</h6>
                                        <ul class="list-unstyled">
                                            <li><i class="bi bi-check text-success me-2"></i>免费基础量表使用</li>
                                            <li><i class="bi bi-check text-success me-2"></i>7天专业版试用</li>
                                            <li><i class="bi bi-check text-success me-2"></i>在线使用指南</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card text-start">
                                    <div class="card-body">
                                        <h6 class="card-title"><i class="bi bi-star me-2"></i>下一步操作</h6>
                                        <ul class="list-unstyled">
                                            <li><i class="bi bi-arrow-right text-primary me-2"></i>完善个人资料</li>
                                            <li><i class="bi bi-arrow-right text-primary me-2"></i>浏览量表库</li>
                                            <li><i class="bi bi-arrow-right text-primary me-2"></i>开始创建量表</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                            <a href="{{ url_for('members.dashboard') }}" class="btn btn-primary me-md-2">
                                <i class="bi bi-speedometer2 me-2"></i>进入工作台
                            </a>
                            <a href="{{ url_for('members.profile') }}" class="btn btn-outline-primary">
                                <i class="bi bi-person-gear me-2"></i>完善资料
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部链接 -->
            <div class="text-center mt-4">
                <p class="mb-2">已有账号？ <a href="{{ url_for('members.login') }}" class="text-decoration-none">立即登录</a></p>
                <small class="text-muted">
                    <a href="{{ url_for('main.index') }}" class="text-decoration-none">
                        <i class="bi bi-arrow-left me-1"></i>返回首页
                    </a>
                </small>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        let currentStep = 1;
        const registrationData = {};

        function nextStep(step) {
            if (step === 1) {
                // 验证第一步表单
                if (!validateBasicInfo()) {
                    return;
                }
                saveBasicInfo();
                showStep(2);
            } else if (step === 2) {
                // 验证协议确认
                if (!document.getElementById('agreeTerms').checked) {
                    alert('请先阅读并同意服务协议');
                    return;
                }
                // 提交注册
                submitRegistration();
            }
        }

        function prevStep(step) {
            if (step === 2) {
                showStep(1);
            }
        }

        function showStep(step) {
            // 隐藏所有步骤
            document.querySelectorAll('.step-form').forEach(form => {
                form.classList.add('hidden');
            });
            
            // 更新步骤指示器
            document.querySelectorAll('.step').forEach((el, index) => {
                el.classList.remove('active');
                if (index + 1 <= step) {
                    el.classList.add('active');
                }
            });
            
            // 显示当前步骤
            document.getElementById(`form-step${step}`).classList.remove('hidden');
            currentStep = step;
        }

        function validateBasicInfo() {
            const username = document.getElementById('username').value.trim();
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;

            if (!username) {
                alert('请输入用户名');
                return false;
            }

            if (username.length < 3 || username.length > 20) {
                alert('用户名长度必须在3-20个字符之间');
                return false;
            }

            if (!email) {
                alert('请输入邮箱地址');
                return false;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                alert('请输入有效的邮箱地址');
                return false;
            }

            if (!password) {
                alert('请输入密码');
                return false;
            }

            if (password.length < 6) {
                alert('密码长度至少6个字符');
                return false;
            }

            if (password !== confirmPassword) {
                alert('两次输入的密码不一致');
                return false;
            }

            const phone = document.getElementById('phone').value.trim();
            if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
                alert('手机号格式不正确');
                return false;
            }

            return true;
        }

        function saveBasicInfo() {
            registrationData.username = document.getElementById('username').value.trim();
            registrationData.email = document.getElementById('email').value.trim();
            registrationData.password = document.getElementById('password').value;
            registrationData.phone = document.getElementById('phone').value.trim();
            registrationData.gender = document.getElementById('gender').value;
        }

        function submitRegistration() {
            // 显示加载状态
            const submitBtn = event.target;
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="bi bi-arrow-clockwise spin me-2"></i>注册中...';
            submitBtn.disabled = true;

            // 提交注册请求
            fetch('/api/auth/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(registrationData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 保存token
                    localStorage.setItem('userToken', data.data.access_token);
                    localStorage.setItem('userInfo', JSON.stringify(data.data.user));
                    
                    // 显示成功页面
                    showStep(3);
                } else {
                    alert('注册失败: ' + data.message);
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                }
            })
            .catch(error => {
                console.error('注册失败:', error);
                alert('注册失败，请稍后重试');
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        }

        // 添加样式
        const style = document.createElement('style');
        style.textContent = `
            .hidden { display: none !important; }
            .step {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #e9ecef;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                color: #6c757d;
            }
            .step.active {
                background: #0d6efd;
                color: white;
            }
            .register-container {
                min-height: 100vh;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
            }
            .register-card {
                background: white;
                border-radius: 15px;
                padding: 40px;
                max-width: 800px;
                width: 100%;
                box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            }
            .agreement-content {
                font-size: 0.9rem;
            }
            .spin {
                animation: spin 1s linear infinite;
            }
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html> 